<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>支付2.0</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <script src="../statics/libs/jquery.min.js"></script>
  <link rel="stylesheet" href="../statics/css/iview.css?t=122">
  <link rel="stylesheet" href="../statics/css/custom.css">
  <script src="../statics/libs/vue.min.js"></script>
  <script src="../statics/libs/iview.min.js"></script>
  <script src="../js/Constants.js"></script>
  <script src="../js/Api.js"></script>
</head>
<!-- ADD THE CLASS layout-boxed TO GET A BOXED LAYOUT -->

<body id="app">
  <div class="box-menu-div" v-show="initMemuFinish" style="display: none;">
    <div style="clear: both; height: 1px;">&nbsp;</div>
    <!-- <div id="page-content-wrapper" style="margin-left: 0px; background-color:#eef1f6;"> -->
      <div class="box-menu" v-for="(i, menu) in menus">
        <h5 class="title">{{menu.text}}</h5>
        <!-- <Row> -->
          <template v-for="(i, child) in menu.children">
            <div class="box-item" style="background: unset;" @click="onSelect(child)">
              <div class="icon-box" :style="'background:'+getColor(child,i)")>
                <Icon size="40" color="#ffffff" :type="getType(child,i)"></Icon>
              </div>
              <div class="item-text">{{child.text}}</div>
            </div>
            <!-- <template v-if="(i + 1) % getBoxSpan(menu) == 0"><br></template> -->
          </template>
        <!-- </Row> -->
      </div>
      <div style="clear: both;"></div>
    <!-- </div> -->
  </div>
</body>
<!-- ./wrapper -->

<script>
  var _this = new Vue({
    el: '#app',
    data: function () {
      return {
        menus: [],
        sort: ['系统管理', '日志查询', '业务管理'],
        showSize: {
          '系统管理':2,
          '业务管理':2,
          '日志查询':3
        },
        menuType: {
          '菜单管理': 'navicon-round',
          '用户管理': 'person-stalker',
          '角色管理': 'person',
          '参数管理': 'document',
          '工号用户授权': 'person-add',
          '分布式锁管理': 'locked',

          '中保付机构代码管理': 'ios-browsers',
          '网上支付二维码入口配置': 'qr-scanner',
          '易宝二维码商户码配置': 'grid',
          '实名认证机构配置管理': 'ios-checkmark',
          '映射配置管理': 'code-working',

          '缴费查询核心': 'social-yen',
          '到账同步核心': 'arrow-swap',
          '任务查询': 'search',
          '实名认证核心': 'android-done',
          '实名认证中保信': 'android-done',
          '外部接口日志': 'log-in',
          '用户授权书同意查询': 'ios-book',
          '网上支付渠道下单记录': 'record'
        },
        initMemuFinish: false,
        testValue: false,
        flowFlag: false,
        currentItem: {}
      };
    },
    events: {
      'workspace-event': function (item) {
        this.currentItem = item;
        this.flowFlag = true;
      },
      'display-event': function () {
        this.flowFlag = false;
      }
    },
    created: function () {
      this.initMenuData();
    }, 
    methods: {
      getBoxSpan: function (item) {
        var size = this.showSize[item.text];
        if(size != null) {
          return size;
        } else {
          return 3;
        }
      },
      getFatherVue: function () {
        return window.parent.page;
      },
      showMenu: function () {
        setTimeout(function() {
          _this.initMemuFinish = true;
        }, 100)
      },
      getMenuFromParent: function () {
        var menus = JSON.parse(JSON.stringify(this.getFatherVue().getMenus()));
        var menuMap = {};
        for(var i in menus) {
          var menu = menus[i];
          menuMap[menu.text] = menu;
        }
        var menus2 = [];
        for(var i in this.sort) {
          var key = this.sort[i];
          menus2.push(menuMap[key]);
        }
        return menus2;
      },
      initMenuData: function () {
        console.log('initMenuData');
        // Api.post('menu/ctrlTree', {}, function(result) {
        //   // console.log(result);
        //   _this.menus = result;
        //   _this.showMenu();
        // }, 'json');
        this.menus = this.getMenuFromParent();
        this.showMenu();
      },
      onSelect: function (item) {
        // console.log(item);
        this.getFatherVue().onSelectFromMainPage(item);
      },
      getColor: function (node, index) {
        return Constants.getColorAuto();
      },
      getType: function (node, index) {
        var type = this.menuType[node.text];
        if(type != null) {
          // console.log('getType');
          return type;
        }
        // console.log('type', type);
        return 'ios-paper';
      }
    }
  });
</script>

</html>

<style scoped>
  body {
    margin: 0px; padding: 0px;
    background-color:#eef1f6;
  }
  .box-menu-div {
    /* border: 1px solid #000; */
    padding-bottom: 50px;
    margin:0px;
    background-color: #fff;
  }
  .box-menu {
    /* float: left; */
    /* width: 350px; */
    /* height: 350px; */
    margin:15px;
    padding:10px;
    /* background: #fff; */
  }
  .box-menu .box-item {
    display: inline-block;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    width: 100px;
    height: 130px;
    cursor: pointer;
  }
  .box-item .icon-box {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 30%;
  }
  .box-item .item-text {
    margin-top: 5px;
  }
  .icon-box .ivu-icon {
    margin-top:11px;
  }
  
</style>